<template>
	<view>
		<view class="loading" :class="animation_updown ? 'animation_updown' : ''" v-if="loading">
			<view v-if="animation_turn" class="loading_view"></view>
			<image class="loading_img" :class="'loading_' + type" src="/static/loading.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		type: {
			type: Number,
			default: 5
		},
		animation_turn: {
			type: Boolean,
			default: false
		},
		animation_updown: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	}
};
</script>

<style lang="scss">
.loading {
	position: fixed;
	z-index: 99;
	left: 0;
	right: 0;
	top: 33vh;
	margin: auto;
	width: 222rpx;
	height: 222rpx;
	overflow: hidden;
	border-radius: 8rpx;
	&_view {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
		width: 166rpx;
		height: 166rpx;
		background: #fff;
		border: 1rpx solid $template-line;
		border-radius: 33%;
		animation: turn 3s linear infinite;
	}
	&_img {
		position: absolute;
		top: 0;
		right: 0;
		width: 620rpx;
		height: 620rpx;
	}
	&_1 {
		position: absolute;
		top: 10rpx;
		left: -81rpx;
	}
	&_2 {
		position: absolute;
		top: 15rpx;
		left: -310rpx;
	}
	&_3 {
		position: absolute;
		top: -180rpx;
		left: -315rpx;
	}
	&_4 {
		position: absolute;
		top: -185rpx;
		left: -90rpx;
	}
	&_5 {
		position: absolute;
		top: -415rpx;
		left: -95rpx;
	}
	&_6 {
		position: absolute;
		top: -410rpx;
		left: -320rpx;
	}
}
.animation_updown {
	animation: updown 1.5s infinite;
}
@keyframes turn {
	0% {
		-webkit-transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(90deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
	}
	75% {
		-webkit-transform: rotate(270deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@keyframes updown {
	0% {
		transform: translate(0px, 0px);
	}
	50% {
		transform: translate(0px, -10px);
	}
	100% {
		transform: translate(0px, 0px);
	}
}
</style>
